<template>
  <div class="side-bar-viewer-page-wrapper">
    <div class="viewer-page-content">
      <a-tree checkable defaultExpandAll selectable v-model:checkedKeys="imageryCheckedKeys" v-model:selectedKeys="imagerySelectedKeys">
        <a-tree-node title="影像图层">
          <a-tree-node v-for="(e, i) in imageryLayers" :key="i" is-leaf>
            <template #title>
              <div class="node-title-box flex-row-center-between">
                <div class="node-title-text text-cut">{{ e.title }}</div>
                <a-popconfirm placement="right" ok-text="确定" cancel-text="取消" @confirm="confirm">
                  <template #title>
                    <div class="popconfirm-title">
                      <p>影像图层参数</p>
                      <div class="slider-box-wrapper"><SliderBar title="亮度" v-model:value="imageryLayerProps.brightness" dots :min="0" :max="5" :step="0.01" /></div>
                      <div class="slider-box-wrapper"><SliderBar title="对比度" v-model:value="imageryLayerProps.contrast" :min="0" :max="5" :step="0.1" /></div>
                      <div class="slider-box-wrapper"><SliderBar title="色调" v-model:value="imageryLayerProps.hue" :min="0" :max="5" :step="0.01" /></div>
                      <div class="slider-box-wrapper"><SliderBar title="饱和度" v-model:value="imageryLayerProps.saturation" :min="0" :max="5" :step="0.01" /></div>
                      <div class="slider-box-wrapper"><SliderBar title="伽马值" v-model:value="imageryLayerProps.gamma" :min="0" :max="5" :step="0.01" /></div>
                      <div class="slider-box-wrapper"><SliderBar title="透明度" v-model:value="imageryLayerProps.alpha" :min="0" :max="1" :step="0.01" /></div>
                    </div>
                  </template>
                  <a class="node-edit" @click.stop="activeItem = i"><FormOutlined /></a>
                </a-popconfirm>
              </div>
            </template>
          </a-tree-node>
        </a-tree-node>
      </a-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined, FormOutlined } from '@ant-design/icons-vue';
import { computed, defineComponent, reactive, toRefs } from 'vue';
import LayerViewModel from '../ViewModel/layer/LayerViewModel';
import { SelectBox, SliderBar } from '@components/widgets';

export default defineComponent({
  name: 'viewer-page',
  components: { GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined, FormOutlined, SelectBox, SliderBar },
  setup() {
    return {};
  },
  props: {
    viewerSource: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      activeKey: [],
      imageryLayers: [],
      terrainLayers: [],
      layerViewModel: null,
      activeItem: 0,
      imagerySelectedKeys: [],
    };
  },
  computed: {
    viewer() {
      return this.viewerSource.viewer;
    },
    imageryCheckedKeys: {
      get() {
        return this.imageryLayers.map((e, i) => (e.show ? i : undefined)).filter(e => e !== undefined);
      },
      set(ids) {
        this.layerViewModel.updateProperty('imageryLayers', 'show', i => {
          return ids.some(e => e === i);
        });
      }
    },
    imageryLayerProps() {
      const {imageryLayers,activeItem} = this;
      const lyr = imageryLayers[activeItem];
      return lyr;
    }
  },
  watch: {
    viewer: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.layerViewModel = new LayerViewModel(newVal, this.updateLayers);
        }
      },
      immediate: true
    },
    activeItem: {
      handler(newVal, oldVal) {
        console.log(newVal, newVal);
      },
      immediate: true
    }
  },
  beforeMount() {
    console.log('onBeforeMount aaaa');
  },
  mounted() {
    console.log('onMounted aaaa');
  },
  beforeUnmount() {
    console.log('onBeforeUnmount aaaa');
    this.layerViewModel && this.layerViewModel.destroy();
    this.layerViewModel = null;
  },
  methods: {
    updateLayers({ type, layers }) {
      console.log(layers);
      this[type] = layers;
    },
    confirm() {},
    onImageryCheck(e, a) {
      console.log(e, a);
    },
    onCheck(e) {
      console.log(e);
    }
  }
});
</script>

<style lang="less">
.side-bar-viewer-page-wrapper {
  height: 100%;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 1);

  .viewer-page-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .node-title-box {
    width: 12em;
    .node-title-text {
      width: 8em;
    }
    .node-edit {
      width: 2em;
      color: #1787ff;
      font-size: 1em;
      text-align: center;
      transition: all 250ms;

      &:hover {
        color: #0055ff;
        font-size: 1.1em;
        font-weight: 600;
      }

      &:active {
        color: #1787ff;
        font-size: 1em;
      }
    }
  }
}

.popconfirm-title {
  padding-right: 1em;
  .slider-box-wrapper {
    display: flex;
    width: 20em;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, 0.8);
    margin-bottom: 6px;
  }
}
</style>
